{% extends 'base.html' %}
{%block title%}{{category.hierarchy.name}} Browser{% endblock %}

{% block extra-head %}
<link href="{{MEDIA_URL}}css/bb3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">//<![CDATA[
function doPageSize(sel){
	var url = "{{get_params.page_size|safe}}page_size="+sel.options[sel.selectedIndex].text;
	window.location=url;return false;
}
//]]></script>
{% endblock %}


{% block content%}

<div class="titlebar5">
  <div class="pre"></div>
  <div class="titleModes"><a href="#">
  	<img src="{{MEDIA_URL}}img/ico_help.gif" width="16" height="16" border="0" /></a><a href="#">
  	<img src="{{MEDIA_URL}}img/ico_edit.gif" width="16" height="16" border="0" /></a>
  </div>
  <div class="title">{{category.hierarchy.name}} Browser</div>
  <div class="clear"></div>
  <div class="post"></div>
  <div class="clear"></div>
</div>
<div>
  <p class="linkTrail">
  {% for crumb in category.breadcrumbs %}
  {% if forloop.last %}
   {{crumb.name}}
  {% else %}
  <a href="{{crumb.url}}">{{crumb.name}}</a> &gt;
  {% endif %}
  {% endfor %}
  </p>
</div>
<div class="browse25x75">
    
    <div class="left">
    <div class="gearContainer">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><p class="large_bold" style="margin:0px 0px 3px 3px ">{{category.name}}</p>
                <div style="padding:0px; ">
                  <p class="browseCat">&nbsp;</p>
                </div></td>
          </tr>
          <tr valign="bottom">
            <!-- <td height="30" valign="middle" class="backgroundLight">&nbsp;
              <input name="textfield" type="text" size="15">
&nbsp;&nbsp; </td>
        </tr>
        <tr valign="bottom">
          <td class="backgroundLight"><p style="margin-top: 1px; margin-bottom: 6px;">&nbsp;
                <input name="Submit" type="submit" class="formButton" value="Search">
          </p></td> -->
          </tr>
        </table>
    </div>
    </div>
    <div class="right">
    <div class="gearContainer">
    <div class="gearContent" id='gcnt9800011'>
          <p class="smallBoldColor" style="margin-bottom: 6px;">&nbsp;Documents</p>
            <form id="usageSelect" onSubmit="doPageSize(this);">
            <div style="background-color:#e6e6e6; font-size:0.9em; font-weight:700; margin:0em; padding:0px 5px 0px 5px; float:right; display:table;"><span class="barSpaceTitle">Show #:</span>
                <select name="usageFilter" onchange='doPageSize(this);'>
                  <option {% ifequal page.paginator.per_page 10 %}selected{% endifequal%} value="#" >10</option>
                  <option {% ifequal page.paginator.per_page 25 %}selected{% endifequal%} vvalue="#">25</option>
                  <option {% ifequal page.paginator.per_page 50 %}selected{% endifequal%} vvalue="#">50</option>
                </select>
            </div>
            </form>
            <div class="menuPaging"><span class="barSpaceTitle">Page:</span>
            {% for p in pages %}
            <span {% ifequal p page.number%}class="select"{% endifequal %}><a href="{{get_params.page}}page={{p}}">{{p}}</a></span>
            {% endfor %}
			{% if page.has_next %}<a href="{{get_params.page}}page={{page.next_page_number}}">&gt;&gt;</a>{% endif %}
			</div>
            <div class="menuSort">
            	<span class="barSpaceTitle">Sort Order:</span>
            	<a href="{{get_params.order_by}}order_by={% ifequal order_by 'title'%}-title{%else%}title{%endifequal%}">Title 
            	{% ifequal order_by 'title'%}<img src="{{MEDIA_URL}}img/img_arrow_down.gif" width="10" height="10" border="0" />{% endifequal %}
            	{% ifequal order_by '-title'%}<img src="{{MEDIA_URL}}img/img_arrow_up.gif" width="10" height="10" border="0" />{% endifequal %}
            	</a>
            	<a href="{{get_params.order_by}}order_by={% ifequal order_by 'modified'%}-modified{%else%}modified{%endifequal%}">Date 
            	{% ifequal order_by 'modified'%}<img src="{{MEDIA_URL}}img/img_arrow_down.gif" width="10" height="10" border="0" />{% endifequal %}
            	{% ifequal order_by '-modified'%}<img src="{{MEDIA_URL}}img/img_arrow_up.gif" width="10" height="10" border="0" />{% endifequal %}
            	</a>
            	<a href="{{get_params.order_by}}order_by={% ifequal order_by 'mimetype'%}-mimetype{%else%}mimetype{%endifequal%}">File Type
            	{% ifequal order_by 'mimetype'%}<img src="{{MEDIA_URL}}img/img_arrow_down.gif" width="10" height="10" border="0" />{% endifequal %}
            	{% ifequal order_by '-mimetype'%}<img src="{{MEDIA_URL}}img/img_arrow_up.gif" width="10" height="10" border="0" />{% endifequal %}
            	</a></div>
            <table border="0" cellpadding="0" cellspacing="0" id="cmListTable">
               {% for object in page.object_list %}
               <tr class="{% cycle 'odd' 'even'%}">
                 <td class="thumb"><img src="{{MEDIA_URL}}img/thb_altonbrown.jpg" alt="Alton Brown" width="48" height="64" /></td>
                 <td class="content"><div class="listIcon"></div>
                     <a href="{{ object.get_absolute_url }}">{{object.title}}</a><br />
                     <span class="summary"><b><span class="smaller">{{object.content|striptags|safe|truncatewords:10}}</span></b><br />
                     <b>Updated:</b>{{object.modified|date:"m/d/Y"}}</span> </td>
               </tr>
               {% endfor %}
          </table>
          <div class="menuPaging"><span class="barSpaceTitle">Page:</span>
            {% for p in pages %}
            <span {% ifequal p page.number%}class="select"{% endifequal %}><a href="?page={{p}}">{{p}}</a></span>
            {% endfor %}
			{% if page.has_next %}<a href="br_list_next.shtml">>></a>{% endif %}
			</div>
      </div>
      
      </div>
    </div>
  
  <div class="clear"></div>  
  </div>
</div>
{% endblock %}
